<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录成功</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { font-family: Arial, sans-serif; background: #f5f6fa; margin: 0; }
        .container {
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 200px;
            background: #222d32;
            color: #fff;
            padding-top: 40px;
            box-shadow: 2px 0 8px rgba(0,0,0,0.05);
        }
        .sidebar h2 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 22px;
            letter-spacing: 2px;
        }
        .nav {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .nav li {
            margin: 0;
        }
        .nav a {
            display: block;
            padding: 16px 32px;
            color: #fff;
            text-decoration: none;
            font-size: 16px;
            transition: background 0.2s;
        }
        .nav a:hover, .nav a.active {
            background: #007bff;
        }
        .content {
            flex: 1;
            padding: 48px 32px;
            background: #fff;
        }
        /* 京东头部优化 */
        .jd-topbar {
            background: #fff;
            border-bottom: 1px solid #eee;
            padding: 0;
            font-family: Arial, sans-serif;
        }
        .jd-topbar-inner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            padding: 18px 0 0 0;
            justify-content: space-between;
        }
        .jd-logo-wrap {
            display: flex;
            align-items: center;
        }
        .jd-logo {
            height: 48px;
            margin-right: 10px;
        }
        .jd-title {
            font-size: 32px;
            color: #e1251b;
            font-weight: bold;
            letter-spacing: 2px;
        }
        .jd-search-wrap {
            flex: 1;
            display: flex;
            align-items: center;
            margin: 0 40px;
        }
        .jd-category {
            height: 36px;
            border: 1px solid #ddd;
            border-radius: 2px 0 0 2px;
            background: #fafafa;
            color: #666;
            font-size: 15px;
            padding: 0 10px;
            outline: none;
        }
        .jd-input {
            height: 36px;
            border: 1px solid #e1251b;
            border-left: none;
            font-size: 15px;
            padding: 0 12px;
            outline: none;
            width: 260px;
        }
        .jd-search-btn {
            height: 36px;
            background: #e1251b;
            color: #fff;
            border: none;
            border-radius: 0 2px 2px 0;
            font-size: 16px;
            padding: 0 28px;
            cursor: pointer;
            margin-left: -1px;
            transition: background 0.2s;
        }
        .jd-search-btn:hover {
            background: #c91d1d;
        }
        .jd-cart {
            font-size: 16px;
            color: #e1251b;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .jd-cart-icon {
            font-size: 22px;
            margin-left: 6px;
            position: relative;
        }
        .jd-cart-num {
            position: absolute;
            top: -8px;
            right: -12px;
            background: #e1251b;
            color: #fff;
            border-radius: 50%;
            font-size: 12px;
            padding: 0 5px;
        }
        .jd-seckill-nav {
            background: #fff;
            border-bottom: 2px solid #e1251b;
            padding: 0 0 0 20px;
        }
        .jd-seckill-tab {
            display: inline-block;
            background: #e1251b;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            padding: 10px 32px;
            border-radius: 0 0 4px 4px;
            margin-bottom: -2px;
        }
        .jd-seckill-banner {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 32px;
            background: #fff;
            padding: 24px 20px 0 20px;
            flex-wrap: wrap;
        }
        .jd-seckill-logo {
            flex-shrink: 0;
        }
        .jd-seckill-times {
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .jd-seckill-time {
            font-size: 22px;
            font-weight: bold;
            color: #222;
            background: #f5f5f5;
            border-radius: 20px;
            padding: 10px 32px;
            margin-right: 8px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .jd-seckill-time-active {
            background: #e1251b;
            color: #fff;
            position: relative;
        }
        .jd-seckill-time-label {
            font-size: 26px;
            font-weight: bold;
            margin-right: 8px;
        }
        .jd-seckill-timer {
            margin-left: 12px;
            font-size: 16px;
            color: #fff;
        }
        .jd-seckill-soon {
            font-size: 14px;
            color: #e1251b;
            background: #fff3f3;
            border-radius: 12px;
            padding: 2px 10px;
            margin-left: 8px;
        }
        @media (max-width: 900px) {
            .jd-topbar-inner, .jd-seckill-banner { flex-direction: column; align-items: flex-start; }
            .jd-search-wrap { margin: 10px 0; width: 100%; }
            .jd-seckill-times { flex-wrap: wrap; }
        }
        .seckill-goods-list {
            display: flex;
            flex-wrap: wrap;
            gap: 32px;
            justify-content: flex-start;
            align-items: stretch;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 0 32px 0;
        }
        .seckill-card {
            width: 480px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(225,37,27,0.10);
            padding: 16px 20px 16px 20px;
            display: flex;
            flex-direction: row;
            align-items: stretch;
            margin-bottom: 0;
            position: relative;
            overflow: hidden;
            border: 1px solid #f3f3f3;
            transition: box-shadow 0.2s, transform 0.2s;
        }
        .seckill-card:hover {
            box-shadow: 0 8px 32px rgba(225,37,27,0.18);
            transform: scale(1.03);
            z-index: 2;
        }
        .seckill-card-left {
            flex: 0 0 150px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .seckill-card-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-left: 18px;
        }
        .seckill-img {
            width: 120px;
            height: 120px;
            object-fit: contain;
            border-radius: 6px;
            background: #fff;
            margin-bottom: 18px;
            align-self: center;
        }
        .seckill-title {
            margin: 0 0 12px 0;
            font-size: 20px;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            text-align: left;
        }
        .seckill-tags {
            margin-bottom: 18px;
            text-align: left;
            width: 100%;
        }
        .tag {
            display: inline-block;
            font-size: 16px;
            border-radius: 3px;
            padding: 2px 10px;
            margin-right: 8px;
            margin-bottom: 2px;
            vertical-align: middle;
        }
        .tag.self { background: #fff0f0; color: #e1251b; border: 1px solid #e1251b; }
        .tag.seckill { background: #fff7f0; color: #e67e22; border: 1px solid #e67e22; }
        .tag.free { background: #fff0f0; color: #e1251b; border: 1px solid #e1251b; }
        .seckill-bottom {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #f3f3f3;
            margin-top: 24px;
            padding: 18px 0 0 0;
        }
        .seckill-price {
            color: #e1251b;
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: baseline;
        }
        .seckill-price .origin {
            color: #999;
            font-size: 18px;
            text-decoration: line-through;
            margin-left: 12px;
            font-weight: normal;
        }
        .seckill-btn {
            background: #e1251b;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 12px 32px;
            font-size: 22px;
            cursor: pointer;
            transition: background 0.2s;
            font-weight: bold;
            letter-spacing: 2px;
        }
        .seckill-btn:hover {
            background: #c91d1d;
        }
        .seckill-progress {
            width: 100%;
            margin: 12px 0 0 0;
            font-size: 16px;
            color: #888;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .progress-bar {
            flex: 1;
            height: 12px;
            background: #f5f5f5;
            border-radius: 6px;
            overflow: hidden;
            margin-left: 8px;
        }
        .progress-inner {
            height: 100%;
            background: #e1251b;
            border-radius: 6px;
            transition: width 0.3s;
        }
        @media (max-width: 900px) {
            .seckill-goods-list { flex-direction: column; align-items: center; }
            .seckill-card { width: 95vw; }
            .seckill-img { width: 90vw; }
        }
        .seckill-time-bar {
            display: flex;
            align-items: center;
            gap: 32px;
            margin: 32px 0 24px 0;
            padding-left: 40px;
        }
        .seckill-avatar {
            width: 100px;
            height: 100px;
            border-radius: 12px;
            object-fit: cover;
            background: #fff;
            box-shadow: 0 2px 8px #eee;
        }
        .seckill-time-list {
            display: flex;
            gap: 32px;
            flex: 1;
        }
        .seckill-time-item {
            background: #f7f7f7;
            color: #222;
            font-size: 32px;
            font-weight: bold;
            border-radius: 32px;
            padding: 18px 48px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background 0.2s, color 0.2s;
            position: relative;
        }
        .seckill-time-item.active {
            background: #e1251b;
            color: #fff;
        }
        .seckill-status {
            font-size: 20px;
            font-weight: normal;
            margin-left: 8px;
        }
        .seckill-status.soon {
            color: #e1251b;
            background: #fff3f3;
            border-radius: 12px;
            padding: 2px 10px;
            font-size: 18px;
        }
        .seckill-timer {
            font-size: 20px;
            margin-left: 12px;
            font-weight: normal;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="sidebar">
        <h2>导航栏</h2>
        <ul class="nav">
            <li><a href="#" id="nav-seckill" class="active" onclick="showPage('seckill')">秒杀活动</a></li>
            <li><a href="#" id="nav-product" onclick="showPage('product')">商品管理</a></li>
        </ul>
    </div>
    <div class="content" id="main-content">
        <h2>秒杀页面</h2>
        <p>这里是秒杀活动的内容展示区</p>
    </div>
</div>
<script>
function showPage(page) {
    document.getElementById('nav-seckill').classList.remove('active');
    document.getElementById('nav-product').classList.remove('active');
    if(page === 'seckill') {
        document.getElementById('nav-seckill').classList.add('active');
        document.getElementById('main-content').innerHTML = `
            <div class="jd-topbar">
                <div class="jd-topbar-inner">
                    <span class="jd-logo-wrap">
                        <img src="img/崽崽.jpg" alt="小米" class="jd-logo">
                        <span class="jd-title">小米</span>
                    </span>
                </div>
            </div>
            <div class="jd-seckill-nav">
                <div class="jd-seckill-tab active">小米秒杀</div>
            </div>
            <div class="jd-seckill-banner">
                <div class="seckill-time-bar">
                    <div class="seckill-time-list">

                    </div>
                </div>
            </div>
            <div style="margin-top:32px;background:#f8f8f8;padding:24px 0;">
                <div id="seckill-goods-list" style="max-width:1200px;margin:0 auto;"></div>
            </div>
        `;
        // loadProductsByActivity(3001); // 默认加载第一个活动商品
    } else if(page === 'product') {
        document.getElementById('nav-product').classList.add('active');
        document.getElementById('main-content').innerHTML = '<h2>商品管理</h2><p>这里是商品管理的内容展示区</p>';
    }
}

// 全局商品映射，按时间段归类
let productMap = {}; // key: startTime~endTime, value: 商品数组
let activities = [];

window.addEventListener('DOMContentLoaded', function() {
    showPage('seckill');
    fetchAllProductsAndMap();
});

function getTimeSlotKey(start, end) {
    return `${start}~${end}`;
}

function fetchAllProductsAndMap() {
    fetch('/product/activity/activity-products')
        .then(res => res.json())
        .then(data => {
            let list = Array.isArray(data.data) ? data.data : [];
            // 动态生成所有时间段
            let timeSlotSet = new Set();
            list.forEach(item => {
                let activity = item.activity;
                if (activity) {
                    let key = getTimeSlotKey(activity.startTime, activity.endTime);
                    timeSlotSet.add(key);
                }
            });
            activities = Array.from(timeSlotSet).map(key => {
                let [startTime, endTime] = key.split('~');
                return { startTime, endTime };
            });
            // 初始化映射
            productMap = {};
            activities.forEach(act => {
                let key = getTimeSlotKey(act.startTime, act.endTime);
                productMap[key] = [];
            });
            list.forEach(item => {
                let activity = item.activity;
                if (activity) {
                    let key = getTimeSlotKey(activity.startTime, activity.endTime);
                    if (productMap[key]) {
                        productMap[key].push(item);
                    }
                }
            });
            // 渲染时间段按钮
            renderTimeSlots();
            // 默认渲染第一个时间段商品
            // renderProductsByTimeSlot(0);
        });
}

/* === 京东风格时间段样式集成（居中优化） === */
const styleJD = document.createElement('style');
styleJD.innerHTML = `
.jd-seckill-timebar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  margin: 32px auto 24px auto;
  max-width: 900px;
  padding: 0 24px;
  box-shadow: 0 2px 8px rgba(225,37,27,0.08);
}
.jd-seckill-time-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin-right: 32px;
  padding: 0 32px;
  min-width: 120px;
  min-height: 60px;
  border-radius: 16px;
  background: #f8f8f8;
  color: #222;
  font-size: 28px;
  font-weight: bold;
  position: relative;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
}
.jd-seckill-time-item:last-child { margin-right: 0; }
.jd-seckill-time-item.active {
  background: #e1251b;
  color: #fff;
  min-width: 220px;
  min-height: 80px;
  justify-content: flex-start;
  box-shadow: 0 4px 16px rgba(225,37,27,0.10);
  border-radius: 0 32px 32px 0;
  position: relative;
  z-index: 2;
}
.jd-seckill-time-item .jd-seckill-time-label {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 2px;
}
.jd-seckill-time-item .jd-seckill-status {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 2px;
}
.jd-seckill-time-item .jd-seckill-timer {
  font-size: 16px;
  font-weight: normal;
  margin-top: 2px;
  color: #fff;
  background: #c20a0a;
  border-radius: 4px;
  padding: 2px 8px;
  display: inline-block;
}
.jd-seckill-time-item:not(.active) {
  background: #fafafa;
  color: #222;
  border: 1px solid #eee;
  min-width: 120px;
  min-height: 60px;
  border-radius: 32px;
  box-shadow: none;
}
.jd-seckill-time-item:not(.active) .jd-seckill-status {
  color: #e67e22;
}`;
document.head.appendChild(styleJD);

// === 全量动态倒计时 ===
function getNextTimePoint(hour) {
    const now = new Date();
    let target = new Date(now.getFullYear(), now.getMonth(), now.getDate(), hour, 0, 0, 0);
    if (now >= target) {
        target.setDate(target.getDate() + 1);
    }
    return target;
}

let countdownTimer = null;

function renderTimeSlots() {
    const now = new Date();
    const timeList = document.querySelector('.seckill-time-list');
    timeList.className = 'jd-seckill-timebar';

    // 1. 计算高亮时间段索引
    let highlightIdx = activities.findIndex(slot => {
        const start = new Date(slot.startTime.replace(/-/g, '/'));
        const end = new Date(slot.endTime.replace(/-/g, '/'));
        return now >= start && now < end;
    });
    if (highlightIdx === -1) {
        highlightIdx = activities.findIndex(slot => {
            const start = new Date(slot.startTime.replace(/-/g, '/'));
            return now < start;
        });
        if (highlightIdx === -1) highlightIdx = 0;
    }

    // 2. 渲染时间段条
    let html = activities.map((slot, idx) => {
        const start = new Date(slot.startTime.replace(/-/g, '/'));
        const end = new Date(slot.endTime.replace(/-/g, '/'));
        const isActive = idx === highlightIdx;
        let status = '', timerHtml = '';
        if (now < start) {
            status = '<span class="jd-seckill-status">即将开始</span>';
        } else if (now > end) {
            status = '<span class="jd-seckill-status">已结束</span>';
        } else {
            status = '<span class="jd-seckill-status">正在秒杀</span>';
            timerHtml = `<span class=\"jd-seckill-timer\">距结束 <span id=\"seckill-timer\">${formatCountdown(end - now)}</span></span>`;
        }
        return `<div class=\"jd-seckill-time-item${isActive ? ' active' : ''}\" data-idx=\"${idx}\" data-end=\"${slot.endTime}\">\n            <span class=\"jd-seckill-time-label\">${start.getHours().toString().padStart(2, '0')}:00</span>\n            ${status}\n            ${timerHtml}\n        </div>`;
    }).join('');
    timeList.innerHTML = html;
    bindTimeBarClick();

    // 3. 启动倒计时
    if (document.getElementById('seckill-timer') && highlightIdx >= 0) {
        startCountdown(highlightIdx);
    } else if (countdownTimer) {
        clearInterval(countdownTimer);
    }

    // 4. 默认渲染高亮时间段商品
    renderProductsByTimeSlot(highlightIdx);
}

function startCountdown(idx) {
    if (countdownTimer) clearInterval(countdownTimer);
    countdownTimer = setInterval(() => {
        let now = new Date();
        let end = new Date(activities[idx].endTime.replace(/-/g, '/'));
        let diff = end - now;
        if (diff > 0) {
            document.getElementById('seckill-timer').innerText = formatCountdown(diff);
        } else {
            document.getElementById('seckill-timer').innerText = '00:00:00';
            clearInterval(countdownTimer);
        }
    }, 1000);
}

function formatCountdown(ms) {
    let totalSeconds = Math.floor(ms / 1000);
    let h = Math.floor(totalSeconds / 3600);
    let m = Math.floor((totalSeconds % 3600) / 60);
    let s = totalSeconds % 60;
    return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
}

function bindTimeBarClick() {
    const timeItems = document.querySelectorAll('.jd-seckill-time-item');
    timeItems.forEach((item, idx) => {
        item.onclick = function() {
            timeItems.forEach(i => i.classList.remove('active'));
            this.classList.add('active');
            renderProductsByTimeSlot(idx);
            // 切换倒计时为当前高亮时间段
            let endTime = this.getAttribute('data-end');
            if (document.getElementById('seckill-timer')) {
                if (countdownTimer) clearInterval(countdownTimer);
                countdownTimer = setInterval(() => {
                    let now = new Date();
                    let end = new Date(endTime.replace(/-/g, '/'));
                    let diff = end - now;
                    if (diff > 0) {
                        document.getElementById('seckill-timer').innerText = formatCountdown(diff);
                    } else {
                        document.getElementById('seckill-timer').innerText = '00:00:00';
                        clearInterval(countdownTimer);
                    }
                }, 1000);
            }
        }
    });
}

function renderProductsByTimeSlot(idx) {
    let act = activities[idx];
    let key = getTimeSlotKey(act.startTime, act.endTime);
    let list = productMap[key] || [];
    let now = new Date();
    let html = list.map(item => {
        let activity = item.activity;
        let product = item.product;
        let total = activity && activity.totalStock ? activity.totalStock : 0;
        let available = activity && activity.availableStock ? activity.availableStock : 0;
        let sold = total - available;
        let percent = total > 0 ? Math.round((sold / total) * 100) : 0;
        const start = new Date(activity.startTime);
        const end = new Date(activity.endTime);
        let btnHtml = '';
        if (now < start) {
            btnHtml = '<button class="seckill-btn disabled" disabled>未开始</button>';
        } else if (now > end) {
            btnHtml = '<button class="seckill-btn disabled" disabled>已结束</button>';
        } else {
            btnHtml = `<button class=\"seckill-btn\" onclick=\"goToProductDetail('${product ? product.id : ''}')\">立即抢购</button>`;
        }
        return `
        <div class="seckill-card seckill-card-vertical">
          <img class="seckill-img seckill-img-vertical" src="${product ? product.imageUrl : ''}" >
          <div class="seckill-card-info">
            <div class="seckill-title">${product ? product.name : ''}</div>
            <div class="seckill-tags">
              <span class="tag self">自营</span>
              <span class="tag seckill">限时秒杀 抢先提醒</span>
            </div>
            <div class="seckill-progress">
              <span>已售${percent}%</span>
              <div class="progress-bar">
                <div class="progress-inner" style="width:${percent}%;"></div>
              </div>
            </div>
            <div class="seckill-bottom">
              <div class="seckill-price">
                <span>￥${product ? (product.seckillPrice || product.originalPrice) : ''}</span>
                <span class="origin">￥${product ? product.originalPrice : ''}</span>
              </div>
              ${btnHtml}
            </div>
          </div>
        </div>
        `;
    }).join('');
    document.getElementById('seckill-goods-list').innerHTML = html;
}

function goToProductDetail(productId) {
    if (productId) {
        window.location.href = `product.html?id=${productId}`;
    }
}

// 按钮禁用样式
const style = document.createElement('style');
style.innerHTML = `.seckill-btn.disabled { background: #ccc !important; color: #fff !important; cursor: not-allowed !important; border: none; }`;
document.head.appendChild(style);

// 新增样式
const styleVertical = document.createElement('style');
styleVertical.innerHTML = `
.seckill-card-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  margin: 24px 16px;
  padding: 18px 12px 18px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(225,37,27,0.10);
  background: #fff;
}
.seckill-img-vertical {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px #eee;
}
.seckill-card-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.seckill-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f3f3f3;
  margin-top: 18px;
  padding: 12px 0 0 0;
}
`;
document.head.appendChild(styleVertical);

</script>
</body>
</html> 